@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.root {
  composes: clearfix from "../../Sass/common/_base.scss";
  display: block;
  width: 100%;
  position: relative;
}

.btn-catalog-item {
  font-size: $font-size-small;
  composes: btn from "../../Sass/common/_buttons.scss";
  @extend %wrap;
  position: relative;
  width: 100%;
  padding: 8px $padding * 2.5 8px $padding;
  line-height: normal;

  &:focus,
  &:hover {
    color: $modal-highlight;
    &:before {
      opacity: 1;
    }
  }

  &--is-previewed {
    color: $modal-highlight;
    font-weight: $font-weight-bold;
    &:before {
      opacity: 1;
    }
  }
  &--is-trashable {
    padding-right: $padding * 5.7;
  }

  @media (max-width: $sm) {
    font-size: $font-size-mid-small;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid $grey-lighter;
  }
}

.btn-action {
  composes: btn from "../../Sass/common/_buttons.scss";
  position: absolute;
  color: $color-primary;
  right: 0;
  top: 4px;

  @media (max-width: $sm) {
    top: 5px;
  }

  svg {
    height: 18px;
    width: 18px;
    margin: 5px;
    fill: $charcoal-grey;
  }

  &:hover,
  &:focus {
    svg {
      fill: $modal-highlight;
    }
  }

  &--stats-bars {
  }

  &--add-to-map {
  }

  &--remove-from-map {
  }

  &--loading-on-map {
    top: 3px;
    right: 12px;
    &:before {
      position: absolute;
    }
  }
}

.btn-trash {
  right: 32px;
}
